import React, { Component,Fragment } from 'react'
import {Card,Form, Input, Button, Upload, message} from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import {getArt,updateArt} from 'api'
import E from 'wangeditor'
const layout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 0,
    span: 24,
  },
};
export default class ArtAdd extends Component {
  constructor () {
    super()
    this.state = {
      url: '',//保存上传图片返回的图片地址
      editor: null, //富文本
      article: {}  //当前所编辑文章数据
    }
  }
  render() {
    const _this=this
    const props = {
      name: 'file',
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      headers: {
        authorization: 'authorization-text',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 图片上传成功`);
          const {url} = info.file.response
          _this.setState({
            url
          })
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败.`);
        }
      },
    };
    return (
      <Fragment>
        <Card style ={{ textAlign:'left' }}>编辑文章</Card>
        {
          this.state.article.title
          ?
          <Form
          {...layout}
          name="basic"
          style={{ marginTop:20 }}
          initialValues = 
            {
              this.state.article
            }
          
          onFinish={this.onSubmit}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入标题!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="作者"
            name="auther"
            rules={[
              {
                required: true,
                message: '请输入作者!',
              },
            ]}
          >
            <Input/>
          </Form.Item>
          <Form.Item
            label="描述"
            name="desc"
          >
            <Input.TextArea/>
          </Form.Item>
          <Form.Item
            label="封面图片"
            style={{ textAlign:'left' }}
          >
            <Upload {...props} >
              <Button style={{ marginLeft:30 }} icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
            </Form.Item>
            <Form.Item
            label="内容"
            style={{ textAlign:'left' }}
          >
           <div id='content'>

           </div>
            </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit" >
              提交
            </Button>
          </Form.Item>
        </Form>
        :
        ''
        }
      </Fragment>
    )
  }
  componentDidMount () {
    this.fetchArt()
  }
  fetchArt = () => {
    getArt(this.props.match.params.id).then(res=>{
       if(res.data.code === '200'){
         this.setState({
          article: res.data.data
         },()=> {
          const editor = new E('#content')
          editor.create()
          // 设置富文本的初始值
          editor.txt.html(res.data.data.content)
          this.setState({
            editor
          })
         })
       }
    })
  }
  onSubmit = (value) =>{
     const upLoad = {
       ...value,
       id:this.props.match.params.id,
       readCount:this.state.article.readCount,
       createAt:this.state.article.createAt,
       pic: this.state.url,//此处要写在...value下面，要覆盖其里面的pic内容
       content: this.state.editor.txt.html()//获取富文本编辑器内容
     }
     updateArt(upLoad).then(res=>{
       if(res.data.code === '200'){
         message.success(res.data.msg,2,()=>{
           this.props.history.go(-1)
         })
       }
     })
  }
}

